<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :size="size" :inline="true" v-show="showSearch" label-width="85px">
      <el-form-item label="房地产项目" prop="projectId">
        <el-select
          v-model="queryParams.projectid"
          placeholder="请选择房地产项目"
          style="width: 240px"
          @change="getTermList"
        >
          <el-option
            v-for="p in projectinfolist"
            :key="p.projectid"
            :label="p.projectname"
            :value="p.projectid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋" prop="termid">
        <el-select
          v-model="queryParams.termid"
          placeholder="请选择楼栋"
          style="width: 240px"
        >
          <el-option
            v-for="t in terminfolist"
            :key="t.termid"
            :label="t.termname"
            :value="t.termid"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :size="size" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-for="(item, index) in salestates"
          :key="index"
          :size="size"
          :style="bgcolorRender(item.bgcolor)"
        >{{item.salename}}</el-button>
        <!-- <el-color-picker
          v-model="color"
          color-format="hex"
          :size="size"
          :predefine="predefineColors">
        </el-color-picker> -->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="HouseList"
      border
      cell-class-name="padding_none"
      :size="size"
    >
      <el-table-column label="楼层" align="center" prop="floor" />
      <el-table-column label="房号" align="center">
        <el-table-column v-for="(item, index) in HouseList[0].houseinfolist" :key="index" :label="item.hourseno" align="center">
          <template slot-scope="scope">
            <el-button
              :size="size"
              type="text"
              :style="bgcolorRender(scope.row.houseinfolist[index].bgcolor) + 'width:100%;'"
              @click="houseDetail(scope.row.houseinfolist[index].hourseid)"
            >{{scope.row.houseinfolist[index].floor + scope.row.houseinfolist[index].hourseno}}</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- 房产信息对话框 -->
    <el-dialog title="" :visible.sync="open" width="89%" append-to-body>
      <template>
        <el-tabs v-model="activeName" type="" @tab-click="handleClick">
          <el-tab-pane label="房产信息" name="houseinfo">
            <el-descriptions
              class="margin-top"
              title=""
              :column="3"
              size=""
              border
            >
              <template slot="title">
                <el-button
                  v-if="form.salestate == '可售' && salemode == 'guide'"
                  type="primary"
                  :size="size"
                  @click="chooseCustomer"
                >开始认购</el-button>
                <el-button
                  v-if="form.salestate == '可售' && salemode == 'change'"
                  type="primary"
                  :size="size"
                  @click="chooseHouse"
                >更换为该房</el-button>
              </template>
              <template slot="extra" v-if="salemode == 'control'">
                <el-button
                  v-for="(item, index) in salestates"
                  v-show="item.salename == '可售' || item.salename == '保留'"
                  :key="index"
                  :size="size"
                  :style="bgcolorRender(item.bgcolor)"
                  @click="updateState(item.salename)"
                >{{item.salename}}</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">房产</template>
                <span v-text="form.hoursename"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">业态</template>
                <span v-text="form.termtype"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">户型</template>
                <span v-text="form.modelname"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">建筑面积</template>
                <span v-text="form.buildarea"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">销售面积</template>
                <span v-text="form.salearea"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">套内面积</template>
                <span v-text="form.inarea"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">建筑面积单价</template>
                <span v-text="form.buildunitprice"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">套内面积单价</template>
                <span v-text="form.inunitprice"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">销售单价</template>
                <span v-text="form.unitprice"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">销售总价</template>
                <span v-text="form.totalprice"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">购买客户</template>
                <span v-text="form.custname"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">当前状态</template>
                <span v-text="form.salestate"></span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-tickets"></i> -->
                  备注
                </template>
                <span v-text="form.description"></span>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="购房进度" name="workprocess" v-if="form.custid > 0 && salemode == 'guide'">
            <WorkProcessStep :hourseid="form.hourseid" :refresh="refresh" @next="getList"/>
          </el-tab-pane>

          <el-tab-pane label="房产事件" name="houseevent" v-if="salemode == 'control'">
            <HouseEvent :hourseid="form.hourseid" :refresh="refresh"/>
          </el-tab-pane>

        </el-tabs>
      </template>
    </el-dialog>

    <!-- 保留对话框 -->
    <el-dialog title="销售控制事件" :visible.sync="eventaddOpen" width="500px" append-to-body>
      <HouseEventAdd :hourseid="form.hourseid" :hoursename="form.hoursename" :salestate="this.salestate" @next="stateSuccess"/>
    </el-dialog>

    <!-- 选择客户对话框 -->
    <el-dialog title="选择客户" :visible.sync="custOpen" width="89%" append-to-body>
      <ChooseCust @custInfo="setCustomer"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="startbuy" :size="size">下一步</el-button>
      </div>
    </el-dialog>

    <!-- 开始认购对话框 -->
    <el-dialog title="开始认购" :visible.sync="buyOpen" width="89%" append-to-body>
      <BuyHouse :custid="customerInfo.custId" :houseinfo="form" :mode="'buy'" @goback="chooseCustomer" @next="buyprocess"/>
    </el-dialog>

    <!-- 完善购房流程对话框 -->
    <el-dialog title="完善购房流程" :visible.sync="processOpen" width="89%" append-to-body>
      <Workprocess :buyid="buyid" @next="finish"/>
    </el-dialog>

  </div>
</template>

<script>
import ChooseCust from '@/views/house_sale/customer/index';
import BuyHouse from '@/views/house_sale/components/BuyHouse/index';
import Workprocess from '@/views/house_sale/components/workprocess/index';
import WorkProcessStep from '@/views/house_sale/components/workprocess/step';
import HouseEvent from '@/views/house_sale/components/houseevent/index';
import HouseEventAdd from '@/views/house_sale/components/houseevent/state';
import { listHouseInfo, getHouseInfo, listProjectInfo, listTerminfo, init, getSaleStates } from "@/api/house_sale/salesGuide";

export default {
  name: "salesGuide",
  props: ["mode"],
  components: {
    ChooseCust,
    BuyHouse,
    Workprocess,
    WorkProcessStep,
    HouseEvent,
    HouseEventAdd
  },
  data() {
    return {
      // 售楼指引/销售控制
      salemode: null,
      salestate: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 房产资料表格数据
      HouseList: [
        {floor: 0, houseinfolist: [
          {}
        ]}
      ],
      // 项目信息列表
      projectinfolist: [],
      // 楼栋信息列表
      terminfolist: [],
      // 销售状态列表
      salestates: [],
      // 弹出层标题
      title: "",
      // 对话框展示标签
      activeName: 'houseinfo',
      // 是否显示房产资料对话框
      open: false,
      // 可售/保留
      eventaddOpen: false,
      // 是否显示开始认购对话框
      buyOpen: false,
      // 是否显示客户选择对话框
      custOpen: false,
      // 是否显示购房流程对话框
      processOpen: false,
      // 客户信息
      customerInfo: {custId:0},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 500,
        projectid: null,
        termid: null
      },
      // 表单参数
      form: {},
      // 购买id
      buyid: 0,
      // 购房进度刷新
      refresh: 0,
      // 表单校验
      rules: {
        termid: [
          { required: true, message: "请选择楼栋", trigger: "blur" }
        ],
        projectid: [
          { required: true, message: "请选择房地产项目", trigger: "blur" }
        ],
      },
      // 组件大小
      size: 'mini',
      // 按钮颜色
      color: '#FFFF00',
      // 按钮预定义颜色
      predefineColors: [
        '#FFFFFF',
        '#00FF00',
        '#FF0000',
        '#FF99FF',
        '#FFFF00'
      ]
    };
  },
  created() {
    this.salemode = this.$route.query.salemode || this.mode;
    this.initAll();
    this.SaleStateList();
  },
  watch: {
    open() {
      if(this.open == true) {
        this.activeName = 'houseinfo';
      }
    }
  },
  methods: {
    // 隐藏所有对话框
    closeAllDialog() {
      // 是否显示房产资料对话框
      this.open = false;
      // 是否显示开始认购对话框
      this.buyOpen = false;
      // 是否显示客户选择对话框
      this.custOpen = false;
      // 是否显示购房流程对话框
      this.processOpen = false;
      // 刷新页面
      this.getList();
    },
    /** 查询房产资料列表 */
    getList() {
      this.loading = true;
      listHouseInfo(this.queryParams).then(response => {
        this.HouseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getTermList() {
      listTerminfo(this.queryParams).then(response => {
        this.terminfolist = response.rows;
      })
    },
    getProjectList() {
      listProjectInfo().then(response => {
        this.projectinfolist = response.rows;
      })
    },
    // 初始化
    initAll() {
      this.loading = true;
      init().then(response => {
        this.projectinfolist = response.projectinfolist;
        this.terminfolist = response.terminfolist;
        this.HouseList = response.HouseList;

        this.queryParams.projectid = this.projectinfolist[0].projectid;
        this.queryParams.termid = this.terminfolist[0].termid;

        this.loading = false;
      });
    },
    // 查看房产详情
    houseDetail(hourseid) {
      this.open = true;
      this.title = "房产详情";
      getHouseInfo(hourseid).then(response => {
        this.form = response.data;
      });
    },
    SaleStateList() {
      getSaleStates().then(response => {
        this.salestates = response.data;
      });
    },
    // 给按钮设置背景色
    bgcolorRender(color) {
      return 'background-color:' + color + '66;'
    },
    // 修改房产状态并添加事件
    updateState(salename) {
      if((this.form.salestate == '保留' || this.form.salestate == '可售') && this.form.salestate != salename) {
        this.eventaddOpen = true;
        this.salestate = salename;
      } else {
        this.$modal.msgWarning("现在不能将该房状态修改为"+salename);
        return;
      }
    },
    // 可售/保留成功
    stateSuccess() {
      this.eventaddOpen = false;
      this.getList();
    },
    // 设置选中的客户
    setCustomer(customerInfo) {
      this.customerInfo = customerInfo;
    },
    // 选择客户
    chooseCustomer() {
      this.closeAllDialog();
      this.custOpen = true;
    },
    // 开始认购
    startbuy() {
      if(this.customerInfo.custId > 0) {
        this.closeAllDialog();
        this.buyOpen = true;
      } else {
        this.$modal.msgWarning("请选择客户");
      }
    },
    chooseHouse() {
      this.open = false;
      this.$emit("next", this.form);
    },
    // 查看购买进度
    buyprocess(buyid) {
      this.buyid = buyid;
      this.closeAllDialog();
      this.processOpen = true;
    },
    // 结束购房
    finish() {
      this.closeAllDialog();
    },
    /** 提交按钮 */
    submitForm() {
      this.open = false;
    },
    // 切换对话框标签页
    handleClick(tab, event) {
      if(tab.name == 'workprocess' || tab.name == 'houseevent') {
        this.refresh = ++this.refresh;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.queryParams);
    }
  }
};
</script>

<style>
  .padding_none .cell .el-button--text:hover {
    border-color: #188fff99;
  }
  .padding_none {
    padding: 0!important;
  }
  .padding_none .cell {
    padding: 0!important;
  }
</style>
